import React, { Component, useEffect, useRef } from 'react'
import { useNavigate, useLocation } from "react-router-dom";
import "./header.scss";

const router = [
  {
    name: "企业简介",
    path: "/about/brief"
  },
  {
    name: "企业发展历程",
    path: "/about/history"
  },
  {
    name: "企业架构",
    path: "/about/build"
  },
  {
    name: "荣誉资质",
    path: "/about/flair"
  },
  {
    name: "战略合作",
    path: "/about/cooperate"
  },
  {
    name: "核心竞争力",
    path: "/about/core"
  },
  {
    name: "可持续发展",
    path: "/about/develop"
  },
  {
    name: "投资者关系",
    path: "/about/invest"
  },
  {
    name: "产品中心",
    path: "/product/center"
  },
  {
    name: "经典案例",
    path: "/product/case"
  },
  {
    name: "拓展领域",
    path: "/product/area"
  },
  {
    name: "行业动态",
    path: "/news/industry"
  },
  {
    name: "企业动态",
    path: "/news/company"
  },
  {
    name: "鲲程文化",
    path: "/join/culture"
  },
  {
    name: "鲲程人才",
    path: "/join/genius"
  },
  {
    name: "培养发展",
    path: "/join/regard"
  },
  {
    name: "招贤纳士",
    path: "/join/recruit"
  },
  {
    name: "产品使用说明",
    path: "/download/illustrate"
  },
  {
    name: "终端实用程序",
    path: "/download/terminal"
  },
  {
    name: "客户反馈",
    path: "/contact/custom"
  }
]
class Index extends Component {
  input = React.createRef(null);
  state = {
    menu: "menuBtn",
    nav: "nav",
    fix: "",
    current: 0
  }
  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }
  componentWillUnmount() {
  }
  handleScroll = (e) => {
    if (window.scrollY > 70) {
      this.setState({ fix: "headerFix" })
    } else {
      this.setState({ fix: "" })
    }
  }
  submit = () => {
    for (const key in router) {
      if(router[key]['name'].indexOf(this.input.current.value) != -1){
        this.props.navigation(router[key]['path']);
        this.input.current.value = "";
        return ;
      }
    }
    // this.input.current.value = "";
  }
  goPage(path) {
    if (path) {
      this.props.navigation(path)
    }
    switch (this.props.location.pathname.split('/')[1]) {
      case "/":
        this.setState({
          current: 0,
        })
        break;
      case "about":
        this.setState({
          current: 1,
        })
        break;
      case "product":
        this.setState({
          current: 2,
        })
        break;
      case "news":
        this.setState({
          current: 3,
        })
        break;
      case "join":
        this.setState({
          current: 4,
        })
        break;
      case "download":
        this.setState({
          current: 5,
        })
        break;
      case "contact":
        this.setState({
          current: 6,
        })
        break;
      default:
        this.setState({
          current: 0,
        })
        break;
    }
  }
  cutClass = () => {
    if (this.state.menu === "menuBtn") {
      this.setState({ menu: "menuBtn open", nav: "nav navv", })
    } else {
      this.setState({ menu: "menuBtn", nav: "nav" })
    }
  }
  render() {
    const { fix, menu, nav, current } = this.state;
    return (
      <header>
        <div className={'header ' + fix}>
          <div className="con">
            <div className="left">
              <div className="logo">
                <img src={require("../../static/images/logo-icon.png")} alt="logo"></img>
              </div>
              <div className="title">
                <div className="tit">
                  上海鲲程电子科技有限公司
                </div>
                <div className="txt">
                  Shanghai Kuncheng Electronic Technology Co., Ltd
                </div>
              </div>
            </div>
            <div className="right">
              <div className="con-a1">
                <div className="input">
                  <input type="text" ref={this.input} />
                </div>
                <div className="btn" onClick={this.submit}>
                  搜索
                </div>
              </div>
              <div className="con-a2">
                <div className="navs">
                  <div className="nav">
                    <div className="tit" onClick={() => { this.goPage('/') }}>
                      首页
                    </div>
                  </div>
                  <div className="nav">
                    <div className={current == 1 ? 'tit current' : 'tit'}>
                      关于我们
                    </div>
                    <div className="sub">
                      <a href="/about/brief">企业简介</a>
                      <a href="/about/history">企业发展历程</a>
                      <a href="/about/build">企业架构</a>
                      <a href="/about/flair">荣誉资质</a>
                      <a href="/about/cooperate">战略合作</a>
                      <a href="/about/core">核心竞争力</a>
                      <a href="/about/develop">可持续发展</a>
                      <a href="/about/invest">投资者关系</a>
                    </div>
                  </div>
                  <div className="nav">
                    <div className={current == 2 ? 'tit current' : 'tit'}>
                      产品与解决方案
                    </div>
                    <div className="sub">
                      <a href="/product/center">
                        产品中心
                      </a>
                      <a href="/product/case">
                        经典案例
                      </a>
                      <a href="/product/area">
                        拓展领域
                      </a>
                    </div>
                  </div>
                  <div className="nav">
                    <div className="tit">
                      新闻资讯
                    </div>
                    <div className="sub">
                      <a href="/news/industry">
                        行业动态
                      </a>
                      <a href="/news/company">
                        企业动态
                      </a>
                    </div>
                  </div>
                  <div className="nav">
                    <div className="tit">
                      加入鲲程
                    </div>
                    <div className="sub">
                      <a href="/join/culture">鲲程文化</a>
                      <a href="/join/genius">鲲程人才</a>
                      <a href="/join/regard">培养发展</a>
                      <a href="/join/recruit">招贤纳士</a>
                    </div>
                  </div>
                  <div className="nav">
                    <div className="tit">
                      下载中心
                    </div>
                    <div className="sub">
                      <a href="/download/illustrate">产品使用说明</a>
                      <a href="/download/terminal">终端使用程序</a>
                    </div>
                  </div>
                  <div className="nav">
                    <div className="tit">
                      联系我们
                    </div>
                    <div className="sub">
                      <a href="/contact/custom">客户反馈</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
        <div className={'header-phone ' + fix}>
          <div className='con wrap'>
            <div className={menu} onClick={this.cutClass}>
              <span></span>
              <span></span>
              <span></span>
            </div>
            <div className="logo">
              <img src={require("../../static/images/logo-icon.png")} alt="logo"></img>
            </div>
            <div className='right'>

            </div>
          </div>
          <div className={nav}>
            <div className="list">
              <div className="li" onClick={() => { this.goPage('/') }}>
                <div className="icon">
                  <img src={require("../../static/images/icon015.png")} alt="" />
                </div>
                <div className="txt">
                  首页
                </div>
              </div>
              <div className="li" onClick={() => { this.goPage('/about') }}>
                <div className="icon">
                  <img src={require("../../static/images/icon016.png")} alt="" />
                </div>
                <div className="txt">
                  关于我们
                </div>
              </div>
              <div className="li" onClick={() => { this.goPage('/product') }}>
                <div className="icon">
                  <img src={require("../../static/images/icon017.png")} alt="" />
                </div>
                <div className="txt">
                  产品与解决方案
                </div>
              </div>
              <div className="li" onClick={() => { this.goPage('/news') }}>
                <div className="icon">
                  <img src={require("../../static/images/icon018.png")} alt="" />
                </div>
                <div className="txt">
                  新闻资讯
                </div>
              </div>
              <div className="li" onClick={() => { this.goPage('/join') }}>
                <div className="icon">
                  <img src={require("../../static/images/icon019.png")} alt="" />
                </div>
                <div className="txt">
                  加入鲲程
                </div>
              </div>
              <div className="li" onClick={() => { this.goPage('/download') }}>
                <div className="icon">
                  <img src={require("../../static/images/icon020.png")} alt="" />
                </div>
                <div className="txt">
                  下载中心
                </div>
              </div>
              <div className="li" onClick={() => { this.goPage('/contact') }}>
                <div className="icon">
                  <img src={require("../../static/images/icon021.png")} alt="" />
                </div>
                <div className="txt">
                  联系我们
                </div>
              </div>
            </div>
          </div>
        </div>
      </header>
    )
  }
}

export default function Header() {
  const navigation = useNavigate();
  const child = useRef();
  const location = useLocation();
  useEffect(() => {
    if (child.current.goPage) {
      child.current.goPage();
    }
  }, [location])
  return <Index navigation={navigation} location={location} ref={child} />;
}